import React,{useEffect,useState}from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Button, Card, Input, Form, InputNumber,Descriptions,Tag,Radio,DatePicker ,Select,message} from 'antd';
import { connect,history } from 'umi';
import db from '@/utils/localstorage';
import Contanst from '@/config/contanst'
import Yuan from '@/utils/Yuan';
import moment from 'moment';
import {memberCardStop} from '../service';
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 5,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 15,
      },
      md: {
        span: 15,
      },
    },
  };
  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 10,
        offset: 5,
      },
    },
  };
const StopCard = props =>{
    const {dispatch,vipCard,match} =props;
    const [form] = Form.useForm();
    const [dictTypeList, setDictTypeList] = useState(db.get("dictTypeList")['payment_method']);
    const [stopCardType, setStopCardType] = useState(2);
    useEffect(() => {
        if (dispatch) {
            dispatch({
                type: 'cubeVipCardOper/getMemberCardInfo',
                payload:{
                    cardId:match.params.cardId,
                    memberId:match.params.memberId
                }
              })
         }
       }, []);
    /**
     *  保存
     * @param {*} values 
     */
    const onFinish = async () =>{
      
      const values = await form.validateFields();
      if(values){
        const hide = message.loading('正在停卡');
        if(values.stopCardType==1){
          if(values.stopCardTime){
            if(values.stopCardTime[0]){
              values.stopCardStartTime = moment(values.stopCardTime[0]).format('YYYY-MM-DD')
            }
            if(values.stopCardTime[1]){
              values.stopCardEndTime = moment(values.stopCardTime[1]).format('YYYY-MM-DD')
            }
          }
        }else{
          delete values.stopCardTime
        }
        try {
          let result = await memberCardStop({
            cardId:vipCard.cardId,
            memberId:vipCard.memberId,
            cardType:vipCard.cardType,
            ...values
          });
          hide();
          if(result.code ==0){
            message.success('停卡成功，即将跳转');
            history.push(`/vip/bind-card`);
            return true;
          }else{
            message.error(result.message);
            return false; 
          }
        } catch (error) {
          hide();
          message.error('停卡失败，请重试');
          return false;
        }
      }
    }

    /**
     * 停卡期限
     * @param {*} e 
     */
    const onChange = (e) =>{
      setStopCardType(e.target.value)
    }
    return <PageHeaderWrapper>
        <Card title="会员卡信息" style={{marginBottom:32}}>
        <Descriptions size="small">
            <Descriptions.Item label="会员"><a onClick={()=>go2VipDetail()}>{vipCard.memberName}</a></Descriptions.Item>
            <Descriptions.Item label="会员卡类型">{Contanst.MemberCardTypeMap[vipCard.cardType]}</Descriptions.Item>
            <Descriptions.Item label="会员卡名称">{vipCard.cardName}</Descriptions.Item>
            <Descriptions.Item label="会员卡创建时间">{vipCard.createTime}</Descriptions.Item>
            <Descriptions.Item label="当前状态"><Tag>{Contanst.CardBindStatusMap[vipCard.cardStatus]}</Tag></Descriptions.Item>
            {
                vipCard.cardType=='3'&&<>
                    <Descriptions.Item label="有效期">{vipCard.periodValidity}</Descriptions.Item>
                    <Descriptions.Item label="剩余天数">{vipCard.balance}</Descriptions.Item>
                 </>
            }
            {
                 vipCard.cardType=='2'&&<>
                    <Descriptions.Item label="有效期">{vipCard.periodValidity}</Descriptions.Item>
                    <Descriptions.Item label="剩余次数">{vipCard.balance}</Descriptions.Item>
                 </>
            }
            {
                 vipCard.cardType=='1'&&<>
                    <Descriptions.Item label="有效期">{vipCard.periodValidity}</Descriptions.Item>
                    <Descriptions.Item label="剩余金额">{vipCard.balance}</Descriptions.Item>
                 </>
            }
            <Descriptions.Item label="累计实收金额"><Yuan>{vipCard.totalMoney}</Yuan></Descriptions.Item>
            <Descriptions.Item label="开卡场馆">{vipCard.venueName}</Descriptions.Item>
            <Descriptions.Item label="备注">{vipCard.zb}</Descriptions.Item>
          </Descriptions>
        </Card>
        <Card title="停用会员卡">
        <Form style={{
                    marginTop: 8,
                }}
                form={form}
                name="basic"
                initialValues={{
                  stopCardType:stopCardType,
                  stopCardTime:[moment(),""]
                }}
                >
                <FormItem
                    {...formItemLayout}
                    label="停卡期限"
                    name="stopCardType"
                    rules={[
                    {
                        required: true,
                        message: '请选择停卡期限',
                    },
                    ]}
                >
                   <Radio.Group onChange={onChange}>
                        <Radio value={2}>永久停卡</Radio>
                        <Radio value={1}>临时停卡</Radio>
                    </Radio.Group>
                </FormItem>
              {
                stopCardType==2&&<FormItem
                {...formItemLayout}
                label="退费"
                name="money"
                rules={[
                  {
                      required: true,
                      message: '请输入退费',
                  },
                  ]}
            >
              <InputNumber
                placeholder="请输入退费金额"
                min={0}
                style={{width:'100%'}}
                formatter={value => `${value}元`}
                parser={value => value.replace('元', '')}
                />
            </FormItem>
              }
              {
                stopCardType==1&&<><FormItem
                      {...formItemLayout}
                      label="临时停卡"
                      name="stopCardTime"
                  >
                    <RangePicker style={{width:'100%'}}/>
                  </FormItem>
                  <FormItem
                {...formItemLayout}
                label="收款"
                name="money"
                rules={[
                  {
                      required: true,
                      message: '请输入收款金额',
                  },
                  ]}
            >
              <InputNumber
                placeholder="请输入收款金额"
                min={0}
                style={{width:'100%'}}
                formatter={value => `${value}元`}
                parser={value => value.replace('元', '')}
                />
            </FormItem>
                  </>

              }
            <FormItem
                {...formItemLayout}
                label="支付模式"
                name="paymentMethod"
                rules={[
                {
                    required: true,
                    message: '请选择支付模式',
                },
                ]}
            >
                <Select style={{ width: '100%' }} placeholder="请选择">
                {
                    dictTypeList&&dictTypeList.map((item,index)=><Select.Option key={index} value={item.value}>{item.label}</Select.Option>)
                }
                </Select>
            </FormItem>
            <FormItem
                {...submitFormLayout}
                style={{
                marginTop: 32,
                }}
            >
                <Button type="primary" onClick={onFinish}>
                提交
                </Button>
                <Button
                style={{
                    marginLeft: 8,
                }}
                onClick={()=>window.history.back()}
                >
                返回
                </Button>
            </FormItem>
            </Form>
        </Card>
    </PageHeaderWrapper>
}

export default connect(({ loading,cubeVipCardOper }) => ({
    vipCard: cubeVipCardOper.vipCard
  }))(StopCard);